<!--异常进场-->
<template>
<div class="common-body-wrapper">
  <search-header single-width="130" :searchList="searchList" @changeHeight="toRetTable" @confirmSearch="toSearch" :isNeedTree="true" :isNeedAreaTree="isNeedAreaTree" :isNeedChannelTree="isNeedChannelTree" :isCheckbox="true" :paramName="paramName" :paramNameForAreaTree="paramNameForAreaTree" :paramNameForChannelTree="paramNameForChannelTree" :areaTreeData="areaTreeData" :channelTreeData="channelTreeData" :reloadAreaTree="reloadAreaTree" :reloadChannelTree="reloadChannelTree" @setSelectedNode="selectParkingLotNode" @setSelectedAreaNode="setSelectedAreaNode" @setSelectedChannelNode="setSelectedChannelNode"></search-header>
  <div class="common-table-tree-wrapper">

    <div class="common-table-wrapper">
      <multi-fun-table :sortColumn='notFormatColumn' :orderType='sortType' :fixed-cols="fixedCols" :is-reset-table="isResetTable" :theads-info="theadsInfo" :tbodys-info="tbodysInfo" @handleMultiCheck="handleMultiCheck" @handleSortColumn="handleSortColumn" @searchFn="getList" @getNextPage="getNextPage">
        <div class="operate-btn-group" slot="operateBtnGroup">
          <a class="ake_btn ake_btn_text" v-if="isPermmited('PARKING_OPERATION:ABNORMAL_IN_CAR:EXPORT')" @click.prevent="exportData()">导出</a>
        </div>
        <template slot="tdCell" slot-scope="props">
          <el-table-column :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
            <template slot-scope="scope">
              <span v-if="'reno' == props.prop">{{scope.$index+1}}</span>
              <span v-else-if="'carNoImageUrl' == props.prop">
                <span v-if="!scope.row['carNoImageUrl'] && !scope.row['carImageUrl']">暂无图片</span>
                <a v-else-if="!scope.row[props.prop] && scope.row['carImageUrl']" class="imgLink" @click="showBigImgModal('bigPicModal', scope.row['carImageUrl'])">查看大图</a>
                <a v-else-if="scope.row[props.prop] && !scope.row['carImageUrl']" class="imgLink">
                  <img class="carNoImageUrl" style="width: 60px;height:30px;" alt="无缩略图" :src="scope.row['carNoImageUrl']" @error="handleImg($event,scope.row)" />
                </a>
                <a v-else class="imgLink" @click="showBigImgModal('bigPicModal', scope.row['carImageUrl'])">
                  <img class="carNoImageUrl" style="width: 60px;height:30px;" alt="无缩略图" :src="scope.row['carNoImageUrl']" @error="handleImg($event,scope.row)" />
                </a>
                <img class="carImageUrl" style="width: 60px;height:30px;display:none" alt="暂无图片" :src="scope.row['carImageUrl']" @error="handleImg($event,scope.row)" />
              </span>
              <span class="row-href" v-else-if="'carCode'==props.prop && (scope.row.supportVirtualCarcode || scope.row[props.prop].indexOf('智')>-1)" @click.prevent="checkBindingCarCode(scope.row,'bindingCarCodeModal')">{{ scope.row[props.prop] }}</span>
              <span v-else-if="'exceptionType'==props.prop && scope.row[props.prop]=='同车场再次进场'">
                <a class="imgLink" @click="detailRecord(scope.row)">{{scope.row[props.prop]}}</a>
              </span>
              <span v-else>{{ scope.row[props.prop] }}</span>
            </template>
          </el-table-column>
        </template>
      </multi-fun-table>

      <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
    </div>
  </div>

  <big-pic-modal ref="bigPicModal">
    <img slot="bigImgSlot" :src="bigImgPath | setImgPath" alt="" @error="imgError('../../', 'car', $event)">
  </big-pic-modal>

  <!-- 展示已绑定的车牌号 -->
  <basic-modal ref="bindingCarCodeModal" width="500" customeClass="">
    <h3 slot="title">车牌号</h3>
    <div class="modal-body" slot="modal-body">
      <p v-for="(item,index) in bindingCarCodeList">
        <span>逻辑卡号{{index+1}}：</span>
        <span>{{item.carCode}}</span>
        <span>({{item.cardCode}})</span>
      </p>
    </div>
    <div class="modal-footer" slot="modal-footer"></div>
  </basic-modal>

  <!-- 进场记录详情 -->
  <basic-modal ref="inCarExceptionTypeDetailModal" width="650" :needModalFooter="false">
    <h3 slot="title">进场记录</h3>
    <div class="modal-body" slot="modal-body">
      <table v-if="abnormalInCarExceptionTypeDetail" class="abnormalInCarDetail">
        <tr>
          <td>车牌号</td>
          <td>车牌图片</td>
          <td>进场时间</td>
          <td>进场通道</td>
          <td>放行模式</td>
          <td>放行原因</td>
          <td>操作员</td>
        </tr>
        <tr>
          <td>{{abnormalInCarExceptionTypeDetail.carNo}}</td>
          <td>
            <img :src="abnormalInCarExceptionTypeDetail.enterPlateImageUrl" alt="暂无图片">
          </td>
          <td>{{abnormalInCarExceptionTypeDetail.enterTime}}</td>
          <td>{{abnormalInCarExceptionTypeDetail.enterChannelName}}</td>
          <td>{{abnormalInCarExceptionTypeDetail.enterType}}</td>
          <td>{{abnormalInCarExceptionTypeDetail.confirmInReason}}</td>
          <td>{{abnormalInCarExceptionTypeDetail.inOperatorName}}</td>
        </tr>
      </table>
    </div>
    <div class="modal-footer" slot="modal-footer"></div>
  </basic-modal>
</div>
</template>

<script>
import common from '@mixins/common.js'
import stardardList from '@mixins/tables/stardardList.js'

//modal
import invokeModal from '@mixins/modal/invokeModal.js'
import BigPicModal from '@components/widgets/BigPicModal.vue'

// image
import images from '@mixins/image.js'

// 引进vue的js
import abnormal_in_car from './js/abnormal_in_car.js'
export default {
  mixins: [common, stardardList, invokeModal, images, abnormal_in_car],
  components: {
    BigPicModal
  },
  data() {
    const today = [new Date(moment().format('YYYY-MM-DD 00:00:00')), new Date(moment().format('YYYY-MM-DD 23:59:59'))];

    return {
      fixedCols: 3,
      total: 0,
      paramName: 'parkIds',
      paramNameForAreaTree: 'areaIds',
      paramNameForChannelTree: 'enterChannelNames', //单个通道(enterChannelName="通道名") 多个通道(enterChannelNames="通道名,通道名")
      //prop-返回数据的字段名称   proisNotInter:true,pNameisNotInter:true,，name-查询字段传参名称    text-显示名称  //initHidden  初始化不显示
      searchList: [
        // { type: 'text', isShow: false, name: 'carCode', text: '车牌号码', value: '' },
        { //复合型输入框
          index: 0,
          isShow: false,
          type: "mixedInput",
          name: "carCode",
          text: "",
          value: "carCode",
          inputVal: "",
          style: {
            width: "70px"
          },
          isHandleChange: true,
          btnFlag: 'logicCardCode',
          options: [{
              name: "车牌号",
              value: "carCode"
            },
            {
              name: "逻辑卡号",
              value: "logicCardCode"
            },
            {
              name: "卡面号码",
              value: "faceCardCode"
            },
            {
              name: "卡票号",
              value: "enterCardCode"
            }
          ]
        },
        // { type: 'text', isShow: false, name: 'enterCardCode', text: '卡号', value: '' },
        {
          index: 1,
          type: 'datePicker',
          isShow: false,
          name: 'query_time',
          text: '进场时间',
          propName: 'enterTimeFrom,enterTimeTo',
          value: today,
          style: {
            width: '360px'
          }
        },
        {
          index: 2,
          type: 'select',
          isShow: false,
          name: 'vipType',
          text: '进场VIP',
          value: '',
          options: [],
        },
        {
          index: 3,
          type: 'select',
          isShow: false,
          name: 'exceptionType',
          text: '异常类型',
          value: '',
          options: [{
              name: '全部',
              value: ''
            },
            {
              name: '盘点离场',
              value: '1'
            },
            {
              name: '同车场再次进场',
              value: 'null'
            },
          ]
        },
        {
          index: 4,
          type: 'select',
          isShow: false,
          name: 'isCorrect',
          text: '校正状态',
          value: '',
          options: [{
              name: '全部',
              value: ''
            },
            {
              name: '已校正',
              value: '1'
            },
            {
              name: '未校正',
              value: '0'
            },
          ]
        },
        // { type: 'text', isShow: false, name: 'enterChannelName', text: '进场通道', value: '' },
        {
          index: 5,
          type: 'text',
          isShow: false,
          name: 'comment',
          text: '备注',
          value: ''
        },

      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: 'reno', text: '序号', width: 64 },
        {
          index: 1,
          isShow: false,
          prop: 'carNoImageUrl',
          text: '车牌图片',
          sortable: true,
          minWidth: 80
        },
        {
          index: 2,
          isShow: false,
          prop: 'carCode',
          text: '车牌号',
          sortable: true,
          minWidth: 80
        },
        {
          index: 3,
          isShow: false,
          prop: 'enterCardCode',
          text: '卡号',
          sortable: true,
          minWidth: 80
        },
        {
          index: 4,
          isShow: false,
          prop: 'enterTime',
          text: '进场时间',
          sortable: true,
          minWidth: 160
        },
        {
          index: 5,
          isShow: false,
          prop: 'enterChannelName',
          text: '进场通道',
          sortable: true,
          minWidth: 120
        },
        {
          index: 6,
          isShow: false,
          prop: 'vipType',
          text: 'VIP类型',
          sortable: true,
          minWidth: 80
        },
        {
          index: 7,
          isShow: false,
          prop: 'parkName',
          text: '停车场',
          sortable: true,
          minWidth: 150
        },
        {
          index: 8,
          isShow: false,
          prop: 'isCorrectStr',
          text: '校正状态',
          sortable: true,
          minWidth: 80
        },
        {
          index: 9,
          isShow: false,
          prop: 'exceptionType',
          text: '异常类型',
          sortable: true,
          minWidth: 70
        },
        {
          index: 10,
          isShow: false,
          prop: 'comment',
          text: '备注',
          sortable: true,
          minWidth: 120
        },
        {
          index: 11,
          isShow: false,
          prop: 'operatorName',
          text: '操作员',
          sortable: true,
          minWidth: 80
        },
      ],
      tbodysInfo: []
    }
  },
  methods: {}
}
</script>

<style lang="less" scoped>
table {
  &.abnormalInCarDetail {
    width: 100%;
    border-collapse: collapse;

    >tr {
      >td {
        border: 1px solid #e7e7e7;

        >img {
          width: 100px;
          height: auto;
        }
      }
    }
  }
}
</style>
